<template>
	<view>
		<view class="radio-box">
			<view
				v-for="(item, index) in items"
				:key="index"
				:class="selectedIndex === index ? 'active': ''"
				class="radio-item"
				@click="changeRadio(item.value, index)">{{item.name}}</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectedIndex: 0
			}
		},
		props: {
			items: {
				type: Array,
				default: () => []
			},
			currentIndex: {
				type: Number,
				default: 0
			}
		},
		methods: {
			changeRadio(value, index) {
				this.selectedIndex = index;
				this.$emit('change', value, index);
			}
		},
		created() {
			this.selectedIndex = this.currentIndex;
		}
	}
</script>

<style scoped>
	.radio-box {
		height: 64rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.radio-box .radio-item {
		padding-top: 14rpx;
		padding-bottom: 14rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 128rpx;
		border: 2rpx solid #DC2115;
		background: #fff;
		font-size: 28rpx;
		color: #DC2115;
	}
	.radio-box .radio-item:first-child {
		border-top-left-radius: 8rpx;
		border-bottom-left-radius: 8rpx;
	}
	.radio-box .radio-item:last-child {
		border-top-right-radius: 8rpx;
		border-bottom-right-radius: 8rpx;
	}
	.radio-box .active {
		background: #DC2115;
		color: #fff;
	}
</style>